<template>
  <div class="min-h-screen bg-white">
    <!-- 顶部导航 -->
    <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
      用户注册
    </header>

    <!-- 注册 -->
    <div class="container mx-auto px-4 pt-8">
      <form class="max-w-md mx-auto space-y-6" @submit.prevent="handleRegister">
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">手机号码：</span>
          <input 
            v-model="phone" 
            type="tel" 
            placeholder="请输入手机号码" 
            class="flex-1 border-0 outline-none text-gray-800 text-base sm:text-lg"
          >
        </div>
        
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">密码：</span>
          <input 
            v-model="password" 
            type="password" 
            placeholder="请输入密码" 
            class="flex-1 border-0 outline-none text-gray-800 text-base sm:text-lg"
          >
        </div>
        
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">确认密码：</span>
          <input 
            v-model="confirmPassword" 
            type="password" 
            placeholder="请再次输入密码" 
            class="flex-1 border-0 outline-none text-gray-800 text-base sm:text-lg"
          >
        </div>
        
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">用户姓名：</span>
          <input 
            v-model="username" 
            type="text" 
            placeholder="请输入姓名" 
            class="flex-1 border-0 outline-none text-gray-800 text-base sm:text-lg"
          >
        </div>
        
        <div class="flex items-center border-b border-gray-300 pb-4">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">性别：</span>
          <div class="flex space-x-8">
            <label class="flex items-center cursor-pointer">
              <input type="radio" v-model="gender" value="male" class="w-4 h-4 text-primary focus:ring-primary">
              <span class="ml-2 text-gray-700">男</span>
            </label>
            <label class="flex items-center cursor-pointer">
              <input type="radio" v-model="gender" value="female" class="w-4 h-4 text-primary focus:ring-primary">
              <span class="ml-2 text-gray-700">女</span>
            </label>
          </div>
        </div>
        
        <button 
          type="submit" 
          class="w-full bg-green-500 border-0 text-white py-3 rounded-lg font-bold text-lg shadow-lg hover:bg-green-600 transition-colors duration-300"
        >
          注册
        </button>
      </form>
    <Footer/>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const phone = ref('')
  const password = ref('')
  const confirmPassword = ref('')
  const username = ref('')
  const gender = ref('male')
  const router = useRouter()

  const handleRegister = () => {
    if (!phone.value || !password.value || !confirmPassword.value || !username.value) {
      alert('请填写所有必填项');
      return;
    }
    
    if (password.value !== confirmPassword.value) {
      alert('两次输入的密码不一致');
      return;
    }
    
    const registerInfo = { 
      phone: phone.value, 
      password: password.value,
      username: username.value,
      gender: gender.value
    };
    
    console.log('注册信息:', registerInfo);

    
    alert('注册成功，请登录');
    router.push('/login'); 
  }
</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
</style>